<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
        }

        ul,
        li {
            list-style: none;
        }

        #box {
            width: 360px;
            height: 460px;
            border: 1px solid #ccc;
            padding: 10px;
            position: relative;
            margin-left: 50px;
            margin-top: 50px;
        }

        #box .middleImg {
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            padding: 5px;
            position: relative;
        }

        #box .middleImg img {
            width: 350px;
            height: 350px;
        }

        #box .middleArea {
            width: 100px;
            height: 100px;
            background: rgba(100, 222, 200, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        #box .small {
            /*background: red;*/
            width: 360px;
            height: 50px;
            margin-top: 10px;
        }

        #box .small li,
        #box .small li img {
            width: 48px;
            height: 48px;
        }

        #box .small li {
            float: left;
            border: 1px solid #ccc;
            margin-left: 10px;
            padding: 5px;
            cursor: pointer;
        }

        #box .bigArea {
            position: absolute;
            left: 420px;
            top: 50px;
            overflow: hidden;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            display: none;
        }

        #box .bigArea img {
            position: absolute;
            left: 0;
            top: 0;
            width: 800px;
            height: 800px;
        }
        </style>
</head>
    <div id="box">
        <div class="middleImg">
            <img src="images3/1_2.jpeg" />
            <div class="middleArea"></div>
        </div>
        <div class="small">
            <ul>
                <li><img src="images3/1_1.jpeg" /></li>
                <li><img src="images3/2_1.jpeg" /></li>
                <li><img src="images3/3_1.jpeg" /></li>
                <li><img src="images3/4_1.jpeg" /></li>
                <li><img src="images3/5_1.jpeg" /></li>
            </ul>
        </div>
        <div class="bigArea">
            <img class="bigImg" src="images3/1_3.jpeg" />
        </div>
    </div>
    <script>
    // 100/ 350=400/800  
    //1.  小区域=(大区域/大图)*小图
    //正比公式   小区域/小图=大区域/大图
    $.fn.extend({
        big(){
            this.find(".middleArea").css({
                width:$(".bigArea").outerWidth()/$(".bigImg").width()*$(this).find(".middleImg").width(),
                height:$(".bigArea").outerHeight()/$(".bigImg").height()*$(this).find(".middleImg").height()
            })

            this.find(".middleImg").on("mouseenter",function(){
                $(this).find(".middleArea").show()
                $(this).parent().find(".bigArea").show()
            }).on("mouseleave",function(){
                $(this).find(".middleArea").hide()
                $(this).parent().find(".bigArea").hide()
            })

            this.find(".middleImg").on("mousemove",function(e){
                var disX=e.pageX-$(this).offset().left-$(this).find(".middleArea").width()/2
                var disY=e.pageY-$(this).offset().top-$(this).find(".middleArea").height()/2

                if(disX<=0){
                    disX=0;
                }
                if(disY<=0){
                    disY=0;
                }
                if(disX>=$(".middleImg").outerWidth()-$(".middleArea").outerWidth()-2){
                    disX=$(".middleImg").outerWidth()-$(".middleArea").outerWidth()-2
                }
                if(disY>=$(".middleImg").outerHeight()-$(".middleArea").outerHeight()-2){
                    disY=$(".middleImg").outerHeight()-$(".middleArea").outerHeight()-2
                }
                $(this).find(".middleArea").css({
                    left:disX,
                    top:disY
                })

                $(this).parent().find(".bigImg").css({
                    left:$(".middleImg").outerWidth()/$(".middleArea").outerWidth()*-disX,
                    top:$(".middleImg").outerHeight()/$(".middleArea").outerHeight()*-disY
                })
            })

            let self=this;
            this.find(".small li").on("click",function(){
                var $index=$(this).index()
                self.find(".middleImg img").attr("src",`images3/${$index+1}_2.jpeg`)
                self.find(".bigArea img").attr("src",`images3/${$index+1}_3.jpeg`)
            })
        }
    })
    
    
    
    $(function(){
        $("#box").big()
    })
    </script>
</body>
</html>